<script>
import { ElIcon } from 'element-plus';

export default {
  name: 'CustomTitle',
  components: {
    ElIcon
  },
  props: {
    title: {
      type: String,
      required: true
    },
    icon: {
      type: String,
      default: ''
    },
    size: {
      type: String,
      default: '15px'
    }
  }
}
</script>

<template>
  <div class="title">
    <el-icon v-if="icon">
      <component :is="icon" />
    </el-icon>
    <i>{{ title }}</i>
  </div>
</template>

<style scoped>
.title {
  display: flex;
  align-items: center;
  font-size: 24px;

}

.title i {
  margin-left: 10px;
  font-size: 24px;
  font-style: normal;
}

.el-icon {
  font-size: 24px;
}
</style>

